<template>
  <view class="category-tabs">
    <view 
      class="tab-item" 
      v-for="(tab, index) in tabs" 
      :key="index"
      :class="{ active: activeTab === index }"
      @click="$emit('tab-change', index)"
    >
      <text class="tab-text">{{tab}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CategoryTabs',
  props: {
    tabs: {
      type: Array,
      required: true
    },
    activeTab: {
      type: Number,
      required: true
    }
  },
  emits: ['tab-change']
};
</script>

<style scoped lang="scss">
@import "../../../static/common.scss";

.category-tabs {
  @include flex-row;
  background-color: #fff;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  overflow-x: auto;
}

.tab-item {
  padding: 15rpx 25rpx;
  margin-right: 20rpx;
  border-radius: 25rpx;
  white-space: nowrap;
}

.tab-item.active {
  background-color: #ff6b35;
  color: white;
}

.tab-text {
  font-size: 26rpx;
}
</style>